<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="模糊检索" prop="searchValue">
        <el-input
          v-model="queryParams.searchValue"
          placeholder="设备编码/设备名称/IMEI/ICCID"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="安装路段" prop="roadSectionId">
        <el-select v-model="queryParams.roadSectionId" placeholder="请选择" style="width: 100%">
          <el-option
            v-for="item in roadSectionList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备类型" prop="deviceType">
        <el-select v-model="queryParams.deviceType" placeholder="请选择" clearable style="width: 240px">
          <el-option
            v-for="dict in dict.type.device_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设备状态" prop="deviceStatus">
        <el-select v-model="queryParams.deviceStatus" placeholder="请选择" clearable style="width: 240px">
          <el-option
            v-for="dict in dict.type.device_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['business:device:deviceManage:add']"
        >新建设备</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-bottom"
          size="mini"
          @click="handleUpdate"
          v-hasPermi="['business:device:deviceManage:import']"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-top"
          size="mini"
          @click="handleUpdate"
          v-hasPermi="['business:device:deviceManage:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['business:device:deviceManage:delete']"
        >删除</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="deviceManageList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column type="index" label="序号" width="50"/>
      <el-table-column label="设备编码" align="center" prop="deviceCode" width="160"  >
        <template slot-scope="scope">
          <a class="link-type" @click="handleDeviceInfo(scope.row)">{{scope.row.deviceCode}}</a>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" align="center" prop="deviceName" width="200"  >
        <template slot-scope="scope">
          <a class="link-type" @click="handleDeviceInfo(scope.row)">{{scope.row.deviceName}}</a>
        </template>
      </el-table-column>
      <el-table-column label="ICCID" align="center" prop="iccid" width="180" />
      <el-table-column label="IMEI" align="center" prop="imei" width="150"   >
        <template slot-scope="scope">
          <a class="link-type" @click="handleDeviceInfo(scope.row)">{{scope.row.imei}}</a>
        </template>
      </el-table-column>
      <el-table-column label="设备类型" align="center" prop="deviceType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.device_type" :value="scope.row.deviceType"/>
        </template>
      </el-table-column>
      <el-table-column label="通信状态" align="center" prop="deviceStatus">
        <template slot-scope="scope">
          <!--设备通信状态：0-离线，1-在线-->
          <el-tag type="danger" v-if="scope.row.deviceStatus=='0'">离线</el-tag>
          <el-tag type="success" v-if="scope.row.deviceStatus=='1'">在线</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="安装路段" align="center" prop="roadSection" width="100" />
      <el-table-column label="所属分组" align="center" prop="groupName" width="160" />
      <el-table-column label="负责人" align="center" prop="leader" width="100" />
      <el-table-column label="安装位置" align="center" prop="location" width="150" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center" class-name="small-padding fixed-width"  fixed="right" width="180" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDeviceInfo(scope.row)"
            v-hasPermi="['business:device:deviceManage:view']"
          >详情</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['business:device:deviceManage:edit']"
          >编辑</el-button>
          <!--<el-button
            size="mini"
            type="text"
            icon="el-icon-unlock"
            v-if="scope.row.deviceStatus=='2'"
            @click="enableHandle(scope.row)"
            v-hasPermi="['business:device:deviceManage:edit']"
          >启用</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-lock"
            v-if="scope.row.deviceStatus=='0'"
            @click="disableHandle(scope.row)"
            v-hasPermi="['business:device:deviceManage:edit']"
          >禁用</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="color: #f56c6c"
            @click="handleDelete(scope.row)"
            v-hasPermi="['business:device:deviceManage:delete']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改设备管理对话框 -->
    <el-drawer size="70%"
               :title="title"
               :visible.sync="open"
               :wrapperClosable="false"
               direction="rtl"
               custom-class="form-drawer"
               ref="drawer"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="drawer-box" style="padding:10px 30px;overflow-x: hidden;overflow-y: auto;height: calc(100% - 56px);border-bottom:1px solid #eee;">
        <div class="title">基本信息</div>
        <el-row :gutter="20" style="bottom:-10px;">
          <el-col :span="12">
            <el-form-item label="设备编码" prop="deviceCode">
              <el-input v-model="form.deviceCode" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="form.deviceName" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="IMEI" prop="imei">
              <el-input v-model="form.imei" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="ICCID" prop="iccid">
              <el-input v-model="form.iccid" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="安装路段" prop="roadSectionId">
              <el-select v-model="form.roadSectionId" placeholder="请选择" style="width: 100%" @change="changeRoadSection">
                <el-option
                  v-for="item in roadSectionList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装场地" prop="siteId">
              <el-select v-model="form.siteId" placeholder="请选择" style="width: 100%" @change="changeSite">
                <el-option
                  v-for="item in siteList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="安装位置" prop="locationId">
              <el-select v-model="form.locationId" placeholder="请选择" style="width: 100%" @change="changeLocation">
                <el-option
                  v-for="item in locationList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="leader">
              <el-input v-model="form.leader" :disabled="disabled" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备类型" prop="deviceType">
              <el-radio-group v-model="form.deviceType">
                <el-radio
                  v-for="dict in dict.type.device_type"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="deviceStatus">
              <el-radio-group v-model="form.deviceStatus">
                <el-radio
                  v-for="dict in dict.type.device_status"
                  :key="dict.value"
                  :label="dict.value"
                >{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="" prop="backUpPowerLines">
              <el-checkbox v-model="form.backUpPowerLines" :disabled="disabled"  true-label="0" false-label="1">备用供电线路</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="主线路名称" prop="primaryLineName">
              <el-select v-model="form.primaryLineName" placeholder="主线路名称" clearable>
                <el-option
                  v-for="dict in dict.type.primary_line_name"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input :disabled="disabled" v-model="form.remark" type="textarea" :rows="3"/>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">监控设置</div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="" prop="monitorMainline">
              <el-checkbox v-model="form.monitorMainline" :disabled="disabled"  true-label="0" false-label="1">主线监测</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.deviceType=='1'">
          <el-col :span="24">
            <el-form-item label="">
              <el-checkbox v-model="form.monitorOneStrand" :disabled="disabled"  true-label="0" false-label="1">1号子线监测</el-checkbox>
              <el-radio-group v-model="form.oneStrandVoltage" style="padding-left: 10px" v-if="form.monitorOneStrand=='0'">
                <el-radio label="0">220V</el-radio>
                <el-radio label="1">380V</el-radio>
              </el-radio-group>
              <span style="padding-left: 20px;padding-right: 10px;" v-if="form.monitorOneStrand=='0'">1号子线备注</span>
              <el-input v-model="form.oneStrandRemark" :disabled="disabled" placeholder="请输入" style="width: 400px" v-if="form.monitorOneStrand=='0'"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.deviceType=='1'">
          <el-col :span="24">
            <el-form-item label="">
              <el-checkbox v-model="form.monitorTwoStrand" :disabled="disabled"  true-label="0" false-label="1">2号子线监测</el-checkbox>
              <el-radio-group v-model="form.twoStrandVoltage" style="padding-left: 10px" v-if="form.monitorTwoStrand=='0'">
                <el-radio label="0">220V</el-radio>
                <el-radio label="1">380V</el-radio>
              </el-radio-group>
              <span style="padding-left: 20px;padding-right: 10px;" v-if="form.monitorTwoStrand=='0'">2号子线备注</span>
              <el-input v-model="form.twoStrandRemark" :disabled="disabled" placeholder="请输入" style="width: 400px" v-if="form.monitorTwoStrand=='0'"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.deviceType=='1'">
          <el-col :span="24">
            <el-form-item label="">
              <el-checkbox v-model="form.monitorThreeStrand" :disabled="disabled"  true-label="0" false-label="1">3号子线监测</el-checkbox>
              <el-radio-group v-model="form.threeStrandVoltage" style="padding-left: 10px" v-if="form.monitorThreeStrand=='0'">
                <el-radio label="0">220V</el-radio>
                <el-radio label="1">380V</el-radio>
              </el-radio-group>
              <span style="padding-left: 20px;padding-right: 10px;" v-if="form.monitorThreeStrand=='0'">3号子线备注</span>
              <el-input v-model="form.threeStrandRemark" :disabled="disabled" placeholder="请输入" style="width: 400px" v-if="form.monitorThreeStrand=='0'"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="form.deviceType=='1'">
          <el-col :span="24">
            <el-form-item label="">
              <el-checkbox v-model="form.monitorFourStrand" :disabled="disabled"  true-label="0" false-label="1">4号子线监测</el-checkbox>
              <el-radio-group v-model="form.fourStrandVoltage" style="padding-left: 10px" v-if="form.monitorFourStrand=='0'">
                <el-radio label="0">220V</el-radio>
                <el-radio label="1">380V</el-radio>
              </el-radio-group>
              <span style="padding-left: 20px;padding-right: 10px;" v-if="form.monitorFourStrand=='0'">4号子线备注</span>
              <el-input v-model="form.fourStrandRemark" :disabled="disabled" placeholder="请输入" style="width: 400px" v-if="form.monitorFourStrand=='0'"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="drawer-footer" style="position: absolute;bottom:0px;display:flex;left:50%;padding:10px 0;transform:translate(-50%,0);">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button type="danger" plain @click="cancel">取 消</el-button>
      </div>
    </el-drawer>
    <!--引入设备详情页面-->
    <deviceInfo ref="deviceInfo"></deviceInfo>
  </div>
</template>

<script>
  import { listDeviceManage, getDeviceManage, addDeviceManage, editDeviceManage, delDeviceManage,enable,disable} from "@/api/business/device/deviceManage"
  import { getDeploymentLocationByClassLevel,getChildrenListByParentId } from "@/api/business/device/deploymentLocation"
  import deviceInfo from '@/views/business/device/deviceManage/deviceInfo.vue' //引入设备详情页面
  export default {
    name: "DeviceManage",
    dicts: ['device_status', 'device_type','primary_line_name'],
    components: {deviceInfo},
    data() {
      return {
        disabled:false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 设备列表数据
        deviceManageList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          searchValue: undefined,
          roadSectionId:undefined,
          deviceType:undefined,
          deviceStatus:undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          deviceCode: [
            { required: true, message: "设备编码不能为空", trigger: "blur" }
          ],
          deviceName: [
            { required: true, message: "设备名称不能为空", trigger: "blur" }
          ],
          imei: [
            { required: true, message: "IMEI不能为空", trigger: "blur" }
          ],
          iccid: [
            { required: true, message: "ICCID不能为空", trigger: "blur" }
          ],
          deviceType: [
            { required: true, message: "设备类型不能为空", trigger: "change" }
          ],
          roadSectionId: [
            { required: true, message: "安装路段不能为空", trigger: "change" }
          ],
          siteId: [
            { required: true, message: "安装场地不能为空", trigger: "change" }
          ],
          locationId: [
            { required: true, message: "安装位置不能为空", trigger: "change" }
          ],
          leader: [
            { required: true, message: "负责人不能为空", trigger: "blur" }
          ],
          deviceStatus: [
            { required: true, message: "设备状态不能为空", trigger: "change" }
          ],
          monitorMainline: [
            { required: true, message: "主线监测不能为空", trigger: "change" }
          ],
        },
        roadSectionList:[],//路段集合
        siteList:[],//场地集合
        locationList:[],//位置集合
      }
    },
    created() {
      this.getList()
      this.getRoadSection()//加载路段
    },
    methods: {
      /** 查询商品标签列表 */
      getList() {
        this.loading = true
        listDeviceManage(this.queryParams).then(response => {
          this.deviceManageList = response.rows
          this.total = response.total
          this.loading = false
        })

      },
      /** 设备详情 */
      handleDeviceInfo(row) {
        const id = row.id || this.ids
        this.$refs.deviceInfo.deviceInfo(id)
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          deviceCode: undefined,
          deviceName: undefined,
          imei: undefined,
          iccid: undefined,
          deviceType: "0",
          deviceModel: undefined,
          siteId: undefined,
          site: undefined,
          roadSectionId: undefined,
          roadSection: undefined,
          locationId: undefined,
          location: undefined,
          deviceStatus: "0",
          leader: undefined,
          installDate: undefined,
          groupId: undefined,
          groupName: undefined,
          remark: undefined,
          monitorMainline: "0",//默认开启
          mainStrandState: "0",
          monitorOneStrand: "1",//默认不开启
          oneStrandVoltage: "0",
          oneStrandState: "0",
          oneStrandRemark: undefined,
          monitorTwoStrand: "1",//默认不开启
          twoStrandVoltage: "0",
          twoStrandState: "0",
          twoStrandRemark: undefined,
          monitorThreeStrand: "1",//默认不开启
          threeStrandVoltage: "0",
          threeStrandState: "0",
          threeStrandRemark: undefined,
          monitorFourStrand: "1",//默认不开启
          fourStrandVoltage: "0",
          fourStrandState: "0",
          fourStrandRemark: undefined,
        }
        this.resetForm("form")
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm")
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.getRoadSection()
        this.title = "新建设备"
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const deviceId = row.id || this.ids
        getDeviceManage(deviceId).then(response => {
          this.form = response.data
          this.open = true
          this.title = "编辑设备"
          this.getRoadSection()
        })
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              editDeviceManage(this.form).then(response => {
                this.$modal.msgSuccess("编辑成功")
                this.open = false
                this.getList()
              })
            } else {
              addDeviceManage(this.form).then(response => {
                this.$modal.msgSuccess("新增成功")
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const deviceIds = row.id || this.ids
        this.$modal.confirm('是否确认删除该标签吗？').then(function() {
          return delDeviceManage(deviceIds)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess("删除成功")
        }).catch(() => {})
      },
      /** 启用按钮操作 */
      enableHandle(row) {
        const groupIds = row.id || this.ids
        this.$modal.confirm('是否启用该设备分组？').then(function() {
          return enable(groupIds)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess("启用成功")
        }).catch(() => {})
      },
      /** 禁用按钮操作 */
      disableHandle(row) {
        const groupIds = row.id || this.ids
        this.$modal.confirm('是否禁用该设备分组？').then(function() {
          return disable(groupIds)
        }).then(() => {
          this.getList()
          this.$modal.msgSuccess("禁用成功")
        }).catch(() => {})
      },
      /** 查询路段 */
      getRoadSection() {
        this.roadSectionList=[]
        getDeploymentLocationByClassLevel("0").then(response => {
          this.roadSectionList = response.dataconsole.log( this.roadSectionList)
        })
      },
      //选择路段 ,加载场地
      changeRoadSection(val){
        this.form.roadSection= this.roadSectionList.find(item => item.id == val).name
        this.getSite(val)
      },
      /** 查询场地 */
      getSite(parentId) {
        this.siteList=[]
        this.form.siteId=null
        getChildrenListByParentId(parentId).then(response => {
          this.siteList = response.data
        })
      },
      //选择场地 ,加载位置
      changeSite(val){
        this.form.site= this.siteList.find(item => item.id == val).name
        this.getLocation(val)
      },
      /** 查询位置 */
      getLocation(parentId) {
        this.locationList=[]
        this.form.locationId=null
        getChildrenListByParentId(parentId).then(response => {
          this.locationList = response.data
        })
      },
      //选择位置
      changeLocation(val){
        this.form.location= this.locationList.find(item => item.id == val).name
      },
    }
  }
</script>
<style scoped lang="scss">
  ::v-deep {
    .el-input.is-disabled .el-input__inner {
      background-color: #F5F7FA;
      border-color: #dfe4ed;
      color: #000000;
      cursor: not-allowed;
    }
    .el-range-editor.is-disabled input {
      background-color: #F5F7FA;
      color: #000000;
      cursor: not-allowed;
    }
    .el-radio__input.is-disabled + span.el-radio__label {
      color: #000000;
      cursor: not-allowed;
    }
    .el-textarea.is-disabled .el-textarea__inner {
      background-color: #F5F7FA;
      border-color: #dfe4ed;
      color: #000000;
      cursor: not-allowed;
    }
  }
  .title{
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #333;
    margin: 0;
    padding-bottom:20px;
    &::before{
      content: '';
      width: 5px;
      height: 18px;
      background: #1890FF;
      border-radius: 3px;
      display: inline-block;
      margin-right: 10px;
    }
  }
</style>
